<template>
  <el-form ref="formRef" :model="formData" :rules="formRules" class="login-form" label-position="top" size="large"
    @keyup.enter="goNext">
    <el-form-item prop="password" label="密码">
      <el-input ref="passwordRef" v-model.trim="formData.password" :key="passwordType" :type="passwordType"
        placeholder="请输入6~20位的字母、数字组合密码" />
      <span class="show-pwd" @click="showPwd(1)">
        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>

    <el-form-item prop="comPassword" label="确认密码">
      <el-input ref="comPasswordRef" v-model.trim="formData.comPassword" :key="comPasswordType" :type="comPasswordType"
        placeholder="请输入确认密码" />
      <span class="show-pwd" @click="showPwd(2)">
        <svg-icon :icon-class="comPasswordType === 'password' ? 'eye' : 'eye-open'" />
      </span>
    </el-form-item>
    <div class="bottom-box">
      <el-button class="lg-btn" size="large" type="primary" @click.prevent="goNext">
        下一步
      </el-button>
    </div>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref, unref, computed, toRefs, nextTick, watch } from 'vue';
// 组件依赖
import { ElForm, ElInput, ElMessage } from 'element-plus';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { postNewsPassword } from '@/api/user';
import { useForgetStore } from '../store';
import { useUserStoreHook } from '@/store/modules/user';
const forgetStore = useForgetStore();
const userStore = useUserStoreHook();

const formRef = ref(ElForm);
const passwordRef = ref(ElInput);
const comPasswordRef = ref(ElInput);

const stateData = reactive({
  formData: {
    comPassword: '',
    password: ''
  } as any,
  formRules: {
    password: [{ required: true, trigger: 'blur', message: '请输入新密码' }],
    comPassword: [
      {
        required: true,
        trigger: 'blur',
        min: 6,
        max: 20,
        message: '请输入6-20位数数字和字母组合的密码'
      }
    ]
  },
  passwordType: 'password',
  comPasswordType: 'password'
});

const { formData, formRules, passwordType, comPasswordType } =
  toRefs(stateData);
// const { validForm } = useFormValid(formRef);

async function goNext() {
  formRef.value.validate((valid: boolean, val: any) => {
    // console.log(val);
    if (valid) {
      if (stateData.formData.comPassword !== stateData.formData.password) {
        return ElMessage.warning('请保持两次输入密码一致！');
      }
      postNewsPassword({
        ...stateData.formData,
        sign: forgetStore.getSign,
        phone: forgetStore.getPhone
      })
        .then(res => {
          userStore.resetToken()
          forgetStore.setTabState(2);
        })
        .catch(() => {

        });
    } else {
      return false;
    }
  });
}

function showPwd(num: number) {
  // 显示密码
  if (num === 1) {
    if (passwordType.value === 'password') {
      passwordType.value = '';
    } else {
      passwordType.value = 'password';
    }
    nextTick(() => {
      passwordRef.value.focus();
    });
  } else {
    if (comPasswordType.value === 'password') {
      comPasswordType.value = '';
    } else {
      comPasswordType.value = 'password';
    }
    nextTick(() => {
      comPasswordRef.value.focus();
    });
  }
}

watch(
  () => formData.value.password,
  val => {
    formData.value.password = val.replace(/[\W]/g, '');
  }
);
</script>
<style lang="scss" scoped>
@import '@/styles/index';

.LoginPassForm {
  .bottom-box {
    margin-top: 100px;
  }

  .veri-btn {
    width: 154px;
    margin-left: 16px;
  }

  .input-label-top {
    color: #202224;
    font-size: 18px;
    font-family: 'OPPOSans';
    font-weight: bold;
    line-height: 36px;
  }
}
</style>
